Questions
2 of 6
1What are the different ways to include CSS in HTML?
2What is the difference between inline and block elements?
3How can you apply inline styles in HTML?
4What are global HTML attributes?
5What does the style attribute do?
6What is the purpose of Class attribute? How is it different from ID?
HTMLHTML
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
02 / 06

What is the difference between inline and block elements?

Difference Between Inline and Block Elements in HTML

In HTML, elements are categorized as either inline or block, which affects how they are rendered on the page and how they interact with surrounding content.

Key Differences
  1. 1

    Block Elements:

  2. 2
    • Start on a new line and take up the full width available by default.
  3. 3
    • Can contain other block or inline elements.
  4. 4
    • Examples: <div>, <p>, <h1>–<h6>, <ul>, <ol>.
  5. 5

    Inline Elements:

  6. 6
    • Do not start on a new line and only take up as much width as necessary.
  7. 7
    • Can only contain text or other inline elements.
  8. 8
    • Examples: <span>, <a>, <strong>, <em>.
Example Usage

In short: Block elements structure the layout by occupying full width and stacking vertically, while inline elements flow within text and only occupy the space their content needs.